<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>二进制时钟-BinaryClock</title>
<style>
  .binary_clock_bg {border:0; width:60px; height:40px; background-color:#FFF; }
  .bg_0 {background-color:#FFF; height:10px; width:10px; border:1px solid #898989; float:left; margin:-1px; }
  .bg_1 {background-color:#000; height:10px; width:10px; border:1px solid #898989; float:left; margin:-1px; }
</style>
<script>
    Date.prototype.format = function(format){
	  var o = {
	  "M+" : this.getMonth() + 1, //month
	  "d+" : this.getDate(),    //day
	  "h+" : this.getHours(),   //hour
	  "m+" : this.getMinutes(), //minute
	  "s+" : this.getSeconds(), //second
	  "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
	  "S" : this.getMilliseconds() //millisecond
	  }
	  if (/(y+)/.test(format)) {
	  	format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	  }
	  for (var k in o) {
	  	if(new RegExp("("+ k +")").test(format)) {
	  		format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
	  	}
	  }
	  return format;
}

function $(elementId) {
    return document.getElementById(elementId);
}

function BinaryClock(binaryClockHtmlId) {
	$(binaryClockHtmlId).className = "binary_clock_bg";
	
	var binary = [
            [ 0, 0, 0, 0, 0, 0, 0, 0, 1, 1 ],
            [ 0, 0, 0, 0, 1, 1, 1, 1, 0, 0 ],
            [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0 ],
            [ 0, 1, 0, 1, 0, 1, 0, 1, 0, 1 ]
          ];

    this.printBinaryClock = function() {
    	var binaryClockInnrtHtml = ""; 
	    var hms = new Date().format('hhmmss');
	    for (var i = 0; i < 4; i++) {
	        for (var j = 0; j < 6; j++) {
	  	        if (binary[i][hms[j]] == 0) {
	  	            binaryClockInnrtHtml +=  "<div class='bg_0'></div>";
	  	        } else {
	  	            binaryClockInnrtHtml +=  "<div class='bg_1'></div>";
	  	        }
	        }
	    }
	    $(binaryClockHtmlId).innerHTML = binaryClockInnrtHtml;
    }

    this.run = function() {
    	this.printBinaryClock;
    	window.setInterval(this.printBinaryClock, 333);
    }

}
</script>
</head>
<body>
    <div id="binary_clock"></div>
    <script type="text/javascript">
        var binary = new BinaryClock("binary_clock");
        binary.run();
    </script>
</body>
</html>